<route lang="json5">
{
  style: {
    navigationBarTitleText: '服务',
    navigationBarBackgroundColor: '#FFFFFF',
  },
}
</route>

<template>
  <navbar leftIcon="" text="服务" />
  <view class="scroll">
    <view
      class="service public-page"
      :style="{ height: `calc(100vh - ${safeAreaInsets?.top}px - 44px - 54px)` }"
    >
      <view class="public-background">
        <view class="active">
          <view class="public-height"></view>
          <view class="header">
            <uv-image
              src="https://ai-ecg-beta.lifesense.com/resources/images/company-logo.gif"
              width="680rpx"
              height="290rpx"
            >
              <template v-slot:loading>
                <uv-loading-icon mode="spinner"></uv-loading-icon>
              </template>
            </uv-image>
          </view>
          <view class="company">
            <view class="subsection">
              <uv-subsection
                :list="companyGroup"
                :current="companyCurrent"
                bgColor="#FFFFFF"
                activeColor="#f56c6c"
                fontSize="28rpx"
                custom-style="height: 92rpx;border-radius: 20rpx 20rpx 0 0;padding:0;"
                custom-item-style="border-bottom: 4rpx solid #f56c6c;height:88rpx;"
                @change="companyChange"
              ></uv-subsection>
            </view>
            <view class="company-content">
              <view class="current-once" v-if="companyCurrent === 0">
                <view class="once-title">
                  <view>以心电服务为核心</view>
                  <view>聚焦重症慢病管理 “数字医疗服务”</view>
                </view>
                <view class="once-left-box">
                  <view class="once-left">
                    <view style="margin-top: 40rpx">
                      <view class="red-big-font">23年</view>
                      <view class="info">医疗健康电子制造经验</view>
                    </view>
                    <view style="margin-top: 40rpx">
                      <view class="red-big-font">10年</view>
                      <view class="info">心电AI技术研发沉淀</view>
                    </view>
                  </view>
                  <view class="once-right">
                    <uv-image
                      src="https://ai-ecg-beta.lifesense.com/resources/images/company-man.png"
                      width="360rpx"
                      height="330rpx"
                    >
                      <template v-slot:loading>
                        <uv-loading-icon mode="spinner"></uv-loading-icon>
                      </template>
                    </uv-image>
                  </view>
                </view>
              </view>
              <view class="current-second" v-if="companyCurrent === 1">
                <uv-read-more
                  show-height="330rpx"
                  closeText=""
                  openText=""
                  color="#f56c6c"
                  fontSize="38rpx"
                  :toggle="true"
                >
                  <view>
                    <text class="info info-text">
                      深圳心康医疗科技有限公司是以心电服务为核心业务,聚焦重症慢病管理的“数字医疗服务”高科技企业。是中国领先的集心电设备、心电软件、心电服务为一体的专业心电服务提供商。
                      \n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      公司以创新型可穿戴心电设备(+二导联智能心电衣)、领先AI算法为先导,重点解决心脏病、卒中等重症慢病诊疗与康复过程中关键痛点……
                      ,为临床制定精准治疗方案,为患者康复期自我管理提供数字化依据与专业医疗级服务。
                      \n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      公司拥有互联网医院远程诊断中心及专业的心电医师团队,公司重点建设的“数字慢病中心”为各级医疗机构以及个人家庭提供心血管健康与疾病诊疗的全周期“筛查、监测、诊疗、康复”医疗服务。
                    </text>
                  </view>
                </uv-read-more>
              </view>
            </view>
          </view>
          <view class="product">
            <view class="title">产品中心</view>
            <view class="product-tabs">
              <wd-tabs v-model="tab" slidable="always" :map-num="5" @change="produceChange">
                <block v-for="(item, index) in tabs" :key="index">
                  <wd-tab :title="item.name">
                    <wd-row :gutter="20">
                      <wd-col :span="8" v-for="(ls, idx) in list_" :key="idx">
                        <view class="list">
                          <uv-image
                            :src="ls.url"
                            width="160rpx"
                            height="160rpx"
                            @click="jumpProductDetail(ls.pageUrl)"
                          >
                            <template v-slot:loading>
                              <uv-loading-icon mode="spinner"></uv-loading-icon>
                            </template>
                          </uv-image>
                          <view class="product-info ellipsis">{{ ls.title }}</view>
                        </view>
                      </wd-col>
                    </wd-row>
                  </wd-tab>
                </block>
              </wd-tabs>
            </view>
          </view>
          <view class="public-height"></view>
        </view>
      </view>
    </view>
  </view>
  <tabBar :current="1" />
</template>

<script lang="js" setup>
import tabBar from '@/custom-tab-bar'
import navbar from '@/components/navbar'
import swiper from '@/pages/home/method/swiper'
const { safeAreaInsets } = uni.getWindowInfo()
const companyGroup = reactive(['服务理念', '公司简介'])
const companyCurrent = ref(0)
const tab = ref(0)
const tabs = reactive([
  { name: '全部', type: -1 },
  { name: '心电衣', type: 1 },
  { name: '动态心电', type: 2 },
  { name: '动态血压', type: 3 },
  { name: '心电图机', type: 4 },
  { name: '心电工作站', type: 5 },
  { name: '其它', type: 0 },
])
const { list, jumpProductDetail } = swiper()
const list_ = ref([])
const productGroup = reactive([])
onBeforeMount(() => {
  list_.value = list.value
})
const companyChange = (index) => {
  companyCurrent.value = index
}
const produceChange = (event) => {
  const type = tabs[event.index].type
  list_.value = type < 0 ? list.value : list.value.filter((o) => o.type === type)
}
// -------------------微信分享----------------------
// 分享至好友/群聊
onShareAppMessage((res) => {
  return {
    title: '服务',
    path: getCurrentPages()[0].$page.fullPath,
    success: (res) => {},
    fail: (res) => {},
  }
})
// 分享到朋友圈
onShareTimeline((res) => {
  return {
    title: '服务',
    path: getCurrentPages()[0].$page.fullPath,
    success: (res) => {},
    fail: (res) => {},
  }
})
</script>

<style lang="scss" scoped>
.service {
  .active {
    .header {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding-bottom: 10rpx;
    }
    .info {
      font-size: 24rpx;
      color: #666666;
    }
    .info-text {
      line-height: 40rpx;
      text-align: justify;
    }
    .company {
      margin-top: 30rpx;
      .subsection {
        position: relative;
        z-index: 9;
      }
      .company-content {
        background: #ffffff;
        border-top: 2rpx solid #cccccc;
        border-radius: 0 0 20rpx 20rpx;

        .current-once {
          width: auto;
          padding: 24rpx 0 0 46rpx;
          .once-title {
            font-family:
              PingFangSC,
              PingFang SC;
            font-size: 30rpx;
            font-weight: 600;
            line-height: 40rpx;
            color: #000000;
          }
        }
        .once-left-box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 330rpx;
          .once-left {
            width: auto;
            height: 100%;
            .red-big-font {
              font-family:
                PingFangSC,
                PingFang SC;
              font-size: 42rpx;
              font-weight: 500;
              color: #e50038;
            }
          }
          .once-right {
            width: auto;
          }
        }
        .current-second {
          min-height: 376rpx;
          padding: 30rpx;
        }
      }
    }
    .product {
      .title {
        margin: 24rpx 0;
        font-family:
          PingFangSC,
          PingFang SC;
        font-size: 32rpx;
        font-weight: 600;
        color: #000000;
      }
      .product-tabs {
        padding: 20rpx 0;
        background: #ffffff;
        border-radius: 20rpx;
        :deep(.wd-tabs__map-nav-btn) {
          width: 180rpx;
          height: 60rpx;
          font-size: 26rpx;
          line-height: 60rpx;
          color: #e50038;
          background: #fbedec;
        }
        :deep(.is-active) {
          color: #ffffff;
          background: #e50038;
        }
        :deep(.wd-tabs__nav-item) {
          height: 60rpx;
          font-size: 26rpx;
          border-radius: 40rpx;
        }
        :deep(.wd-tabs__line) {
          display: none;
        }
        :deep(.wd-tabs__nav-item) {
          margin-right: 24rpx;
          color: #e50038;
          background: #fbedec;
        }
        :deep(.wd-tabs__nav-container) {
          align-items: center;
          height: 80rpx;
          margin-left: 20rpx;
          .is-active {
            font-weight: 400;
            color: #ffffff;
            background: #e50038;
          }
        }
        :deep(.wd-tabs__container) {
          margin-top: 10rpx;
        }
        .list {
          margin: 20rpx 0;
          .product-info {
            width: 160rpx;
            margin-top: 16rpx;
            font-size: 22rpx;
            color: #666666;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
